<%--
  Created by IntelliJ IDEA.
  User: lanou
  Date: 18/1/22
  Time: 下午4:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="p" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">


    <title>穷逼聚集地</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #divName{
            display: none;
        }
        #exit{
            display: none;
        }
        #qiong{
            display: none;
        }

    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">幻想天堂</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <p:if test="${sessionScope.get('name')==null}">
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" placeholder="账号" class="form-control" id="userName">
                </div>
                <div class="form-group">
                    <input type="password" placeholder="密码" class="form-control" id="userPwd">
                </div>
                <button type="button" class="btn btn-success" id="login">登录</button>
                <button type="button" class="btn btn-primary"
                        data-toggle="modal" data-target="#myModal">注册</button>

            </form>
            </p:if>


            <div class="navbar-right" >
                <input class='btn btn-success' type='button' id='exit' value='退出'>
            </div>
            <div class="navbar-right" id="divName">

            </div>

        </div><!--/.navbar-collapse -->
    </div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="container">
        <h1>你好, 穷逼!</h1>
        <p>This is the place where a poor forced dream become rich!</p>

            <p id="noqiong"><button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="穷逼"
                                    data-content="登录之后才能看到自己多穷">
                登录显示你有多穷 &raquo;</button></p>


            <p id="qiong"><button id="qiongB" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="穷逼"
                                  data-content="">
                显示你有多穷 &raquo;</button></p>

    </div>
</div>

<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-4">
            <h2>充钱多就可能是大佬的《逆水寒》</h2>
            <p>网易自研的大型动作武侠网游《逆水寒》，改编自武侠名家温瑞安的经典小说《四大名捕之逆水寒》，
                讲述北宋末年一段气壮山河的血腥大追捕，并牵扯出江湖恩怨、朝堂纷争、帮派仇杀、感情纠葛、市井百态等北宋生活画卷。
            </p>
            <p><a class="btn btn-default" href="/success/games?id=1" role="button">查看详情 &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>充钱多可能就是大佬的《新倩女幽魂》</h2>
            <p>游戏以聂小倩和宁采臣之间的爱情故事为主线，玩家可以通过剧情任务一步步感受这段恋情，也能够以过客的身份，感受兰若寺的气息，并与小倩、燕赤霞、姥姥面对面接触。[2]
            </p>
            <p><a class="btn btn-default" href="/success/games?id=2" role="button">查看详情 &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>充钱多就可能是大佬的天谕</h2>
            <p>《天谕》主要讲述了失去最完美搭档龙徊的皇帝启铭独自担起守护云垂的职责，人类在自己的力量下，不断进步，云垂盛世开启。
            </p>
            <p><a class="btn btn-default" href="/success/games?id=3" role="button">查看详情 &raquo;</a></p>
        </div>
    </div>

    <hr>

    <footer>
        <p>&copy; 2018 Company, Inc.</p>
    </footer>
</div> <!-- /container -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    注册
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    账号：<input type="text" placeholder="账号" class="form-control" id="name" onblur="isRegister(this.value)">
                    <span id="isSpan"></span><br>
                    密码：<input type="password" placeholder="密码" class="form-control" id="pwd"><br>
                    个人简介：<input type="text" placeholder="账号" class="form-control" id="about"><br>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="register" data-dismiss="modal">
                    注册
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
    function isRegister(name) {
        var username = name;
        $.ajax({
            type:'post',
            url:'/isRegister',
            data:{userName:username},
            success:function (data) {
                if(data==true){
                    $("#isSpan").html("<font style='color:green'>账号可以使用</font>");
                }else {
                    $("#isSpan").html("<font style='color:red'>该账号已被注册</font>")
                }
            }
        })
    }
    $(document).ready(function(){
        $("#login").on("click",function () {

            var userName =  $("#userName").val();
            var userPwd = $("#userPwd").val();
          $.ajax({
               type:'post',
               url:'/login',
               data:{userName:userName,userPwd:userPwd},
               success:function (data) {
                if(data.name != ""){
                    $("form").hide();
                    $("#divName").html("<a class='navbar-brand' href='#'>欢迎"+data.name+"登录</a>");
                    $("#divName").show();
                    $("#exit").show();
                    $("#noqiong").hide();
                    $("#qiong").show();
                }else {
                    alert("账号或密码错误");
                }

               },
               error:function (data) {

               }
           })
        })
        $("#exit").on("click",function () {
            $.ajax({
                type:'post',
                url:'/exit',
                success:function () {

                   $("form").show();
                   $("#divName").hide();
                   $("#exit").hide();
                    $("#qiong").hide();
                    $("#noqiong").show();
                },
                error:function () {
                    alert("shibai");
                }
            })
        })

        $("#register").on("click",function () {
            var userName = $("#name").val();
            var userPwd = $("#pwd").val();
            var userAbout = $("#about").val();
            $.ajax({
                type:'post',
                url:'/register',
                data:{userName:userName,userPwd:userPwd,userAbout:userAbout},
                success:function () {

                }
            })
        })
        $("#qiongB").on("click",function () {

            $.ajax({
                type:'post',
                url:'/about',
                success:function (data) {
                    $("#qiongB").attr("data-content",data.about);
                }
            })
        })
    })
</script>
</body>
</html>